<template>
  <div>
    <el-form @submit.native.prevent>
      <template v-for="item in salesAttrList" :key="item.id">
        <el-form-item :label="item.attrName">
<!--          TODO  数据以skuValues为准，因为skuValues是选中的值，而skuValueList是销售属性可选值-->
          <el-checkbox-group v-model="item.skuValues">
            <el-checkbox :label="value" v-for="value in item.skuValueList"/>
          </el-checkbox-group>
          <el-button v-show="item.isInput" @click="item.isInput=!item.isInput">新增</el-button>
          <el-col :span="3">
            <el-input v-model="skuValue" v-show="!item.isInput" @blur="pushData(item)"
                      @keyup.enter="pushData(item)" ref="refInput" >
              请输入
            </el-input>
          </el-col>
        </el-form-item>
      </template>
    </el-form>
  </div>
  <div class="foot_class">
    <el-row :gutter="20">
      <el-col :span="3" :offset="6">
        <div>
          <el-button type="primary" @click="last">上一步</el-button>
        </div>
      </el-col>
      <el-col :span="3" :offset="4">
        <div>
          <el-button type="success" @click="next">下一步:设置SPU信息</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import {onMounted, ref, defineProps, defineEmits, watchEffect} from 'vue'

let salesAttrList = ref([])
let propsData = defineProps(['SalesAttrList'])
const emits = defineEmits(['back', 'pushSalesAttrFromData'])
let skuValue = ref('')
let refInput=ref()


onMounted(() => {
  console.log("子组件接受的数据",propsData.SalesAttrList)
  salesAttrList.value=propsData.SalesAttrList
})

function pushData(node) {
  if (!node.isInput) {/*避免触发两次*/
    salesAttrList.value.forEach(item => {
      if (item.id == node.id && skuValue.value != '') {
        item.skuValueList.push(skuValue.value)
        skuValue.value = ''//清空
      }
    })
    node.isInput = !node.isInput
  }
}
function last() {
  emits('back')
}

function next() {
  emits('pushSalesAttrFromData')
}
</script>
<style scoped>

</style>
